import logo from './logo.svg';
import './App.css';
import React, { createContext, forwardRef, useCallback, useContext, useEffect, useState } from 'react';
import { click } from '@testing-library/user-event/dist/click';
import { useMemo,useRef} from 'react';


const MyContext=createContext(null)
function Cpp(){
  const data =useContext(MyContext)
  console.log(data,'name');
  return(
    <div>{data.name}</div>
  )
}
function Bpp(){
  const data =useContext(MyContext)
  function click(){
    data.setName('bpp修改了')
  }
  return (
    <div>
      <button onClick={click}>bpp修改</button>
      <Cpp/>
    </div>
  )
}

function App(){
  // 父组件进行提供数据，用最外层创建的MyContext，用上下文 provider 包裹组件，向下跨组件传递props
  const [name,setName]=useState('我是app传来的值')
   return (
    <MyContext.Provider value={{
      name,
      setName
    }}>
 <div>
      <Bpp />
    </div>
    </MyContext.Provider>
   
   )
}

export default App;
